<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品类型编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
</head>
<style>
    #box {
        width: 600px;
        height: 550px;
        border: 0px solid red;
        margin: 5px auto;
        background-color: white;
    }
    .name_title, #state_title {
        margin-left: -100px;
    }
    #gname ,#gname_en,#gname_tai,#gname_kh{
        margin: 20px 0 0 0;
    }
    #type_status {
        margin-left: -35px;
    }
    #qy_status {
        margin-left: 5px;
    }
    #qy {
        margin-left: 30px;
    }
    #jy {
        margin-left: 30px;
    }
    #jy_status {
        margin-left: 5px;
    }
    #superior_id_div {
        height: 250px;
        border: 1px solid #a6a9ad;
        margin-left: 120px;
        overflow: scroll;
    }
    #superior_id_div, #gname, #superior_id ,#gname_en,#gname_tai{
        width: 400px;
    }
</style>
<body>
<div style="width:100%;height:100%;margin:15px auto;text-align: center" class="layui-btn-group" id="btngroup">
    <button type="button" id="btnchina" class="layui-btn layui-btn-primary" onclick="clickbtn(0)">中文</button>
    <button type="button" id="btnenglish" class="layui-btn layui-btn-primary" onclick="clickbtn(1)">英语</button>
    <!--    泰语-->
    <button type="button" id="btnlaowo" class="layui-btn" onclick="clickbtn(2)">泰语</button>
    <button type="button" id="btnjianpuzhai" class="layui-btn layui-btn-primary" onclick="clickbtn(3)">柬埔寨</button>
</div>
<form id="f">
    <div id="box">
        <div class="layui-inline" style="margin-left: 10px">
            <label class="layui-form-label" >类型图片:</label>
            <div class="layui-input-block" id="icon_div" style="width: 100px;height: 100px;border: 1px solid gray">
                <input style="display: none" type="text" id="icon_input" name="icon" value=""/>
                <img class="test" style="width: 100px;height: 100px;" id="icon" src="/image/no.jpg"/>
            </div>
            <span style="font-size: 14px;color: red;margin-left: 110px">建议使用正方形图片</span>
        </div>
        <div class="layui-inline" id="gname_div" style="display: none">
            <div class="layui-input-block">
                <label class="layui-form-label name_title" id="typename" >名称:</label>
                <input id="gname" value="" type="text" name="gname"
                       placeholder="请输入类型名称"
                       autocomplete="off" class="layui-input" style="width: 400px">
            </div>
        </div>
        <div class="layui-inline" style="display: none" id="gname_en_div">
            <div class="layui-input-block">
                <label class="layui-form-label name_title" id="typename_en" >英语名称:</label>
                <input id="gname_en" value="" type="text" name="gname_en"
                       placeholder="请输入类型英语名称"
                       autocomplete="off" class="layui-input" style="width: 400px">
            </div>
        </div>
        <div class="layui-inline"  id="gname_tai_div">
            <div class="layui-input-block">
                <label class="layui-form-label name_title" id="typename_th" >泰语名称:</label>
                <input id="gname_tai" value="" type="text" name="gname_tai" required lay-verify="required"
                       placeholder="请输入类型泰语名称"
                       autocomplete="off" class="layui-input" style="width: 400px">
            </div>
        </div>
        <div class="layui-inline" style="display: none" id="gname_kh_div">
            <div class="layui-input-block">
                <label class="layui-form-label name_title" id="typename_kh" >柬埔寨名称:</label>
                <input id="gname_kh" value="" type="text" name="gname_kh"
                       placeholder="请输入类型柬埔寨名称"
                       autocomplete="off" class="layui-input" style="width: 400px">
            </div>
        </div>

        <div style="height: 30px"></div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <label class="layui-form-label" id="state_title" >上级类型:</label>
                <input id="superior_id" value="" type="text"
                       placeholder="请选择上级类型，不选则没有上级类型"
                       autocomplete="off" class="layui-input">
                <input id="superior_id_id" type="text" style="display: none" value="" name="superior_id">
            </div>
        </div>

        <div style="height: 1px"></div>
        <div id="superior_id_div">
            <div id="xx">
            </div>
        </div>
    </div>

</form>
</body>
<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>

<script>
    $ = layui.$;
    var form = layui.form;
    var upload = layui.upload;
    var fileName = null;

    layui.use('upload', function () {
        upload.render({
            elem: '#icon_div',
            url: "/admin/upload/uploadimg",
            auto: true,
            choose: function (obj) {
                var files = obj.pushFile();
                obj.preview(function (index, file, result) {
                    $('#icon').attr('src', result);
                });
            },
            done: function (res, index, upload) {
                layui.data("Admin_GoodsTypefileName", {
                    key: 'name',
                    value: res.data[0]
                });
                fileName = res.data[0];
                $("#icon_input").val(res.data);
            },
            error: function () {
                return layer.msg('上传失败，请重试!');
            }
        });
    });

    var data = layui.data("AdminGoodsTypeData").data;
    $("#gname").val(data.gname);
    $("#gname_en").val(data.gname_en);
    $("#gname_tai").val(data.gname_tai);
    $("#gname_kh").val(data.gname_kh);
    var superior_id = data.superior_id;
    $("#superior_id_id").val(superior_id);
    $("#icon").attr("src", "/"+data.icon);
    $("#icon_input").val(data.icon);
    $("#state input[value='" + data.state + "']").prop("checked", true);
    // if (superior_id != null) {
    $.ajax({
        type: "get",
        dataType: "json",
        url: "/admin/GoodsType/selectParentById",//-->res.data
        data: {
            id: superior_id
        },
        success: (res) => {
            if (res.code == 500) {
                return;
            }
            $("#superior_id").val(res.data);
        },
        error: (err) => {
            console.log("查询失败");
        },
        async: false
    });
    // }
    form.render();
    var msgMovieList = layer.msg('正在加载类型列表请稍候。。。', {icon: 16, time: 1000 * 1000, shade: [0.5, '#000', true]});
    setTimeout(function () {
        var obj = [];
        var objData = [];
        $.ajax({
            type: "get",
            dataType: "json",
            url: "/admin/GoodsType/select",
            data: {x:1},
            success: (res) => {
                layer.close(msgMovieList);
                if (res.code == 500) {
                    console.log("查询失败");
                    return;
                }
                obj = [res.data];
                objData.push(res.data);
            },
            error: (err) => {
                console.log("查询失败");
            },
            async: false
        });

        layui.use(['layer', 'tree'], function () {
            var tree = layui.tree;
            tree.render({
                elem: '#xx',
                data: obj,
                click: function (obj) {
                    var nodes = document.getElementsByClassName("layui-tree-txt");
                    for (var i = 0; i < nodes.length; i++) {
                        if (obj.data.title == "类型列表") {
                            return;
                        }
                        if (nodes[i].innerHTML === obj.data.title) {
                            nodes[i].style.color = "orange";
                        } else {
                            nodes[i].style.color = "#555";
                        }
                    }
                    var parentNames = parentName(objData, obj.data) + "/" + obj.data.title;
                    $("#superior_id").val(parentNames);
                    $("#superior_id_id").val(obj.data.id);
                    form.render();
                },
                id: 'treeId',
                showCheckbox: false,
                onlyIconControl: true
            });
        });
    }, 100);
    var s = "";///类型列表
    var parentName = (res, obj) => {
        s = "";
        var result = parent(res, obj);
        // if(result==="不是数组"){
        //     return s;
        // }
        return "/类型列表" + s;
    }
    var parent = (res, obj) => {
        if (!Array.isArray(res)) {
            return "不是数组";
        }
        if (obj.parent_ID == null) {
            return null;
        }
        var parentID = obj.parent_ID;
        var temp = "";
        if (parentID != null) {
            var o = queryParent(res, parentID);
            if (o == null) {
                return null;
            }
            s = "/" + o.title + s;
            parent(res, o);
        }

    }
    var o = null;
    var queryParent = (res, parent_ID) => {
        if (!Array.isArray(res)) {
            return o;
        }
        for (var i in res) {
            if (res[i].id == parent_ID) {
                o = res[i];
                return o;//一个parent
            }
            if (Array.isArray(res[i].children)) {
                queryParent(res[i].children, parent_ID);
            }
        }
        return o;
    }

    function clickbtn(index) {
        var btns=$("#btngroup").find("button");
        if(index==0){
            $("#gname_div").css("display","block");
            $("#gname_en_div").css("display","none");
            $("#gname_tai_div").css("display","none");
            $("#gname_kh_div").css("display","none");
        } else if(index==1){
            $("#gname_div").css("display","none");
            $("#gname_en_div").css("display","block");
            $("#gname_tai_div").css("display","none");
            $("#gname_kh_div").css("display","none");
        }else if(index==2){
            $("#gname_div").css("display","none");
            $("#gname_en_div").css("display","none");
            $("#gname_tai_div").css("display","block");
            $("#gname_kh_div").css("display","none");
        }else if(index==3){
            $("#gname_div").css("display","none");
            $("#gname_en_div").css("display","none");
            $("#gname_tai_div").css("display","none");
            $("#gname_kh_div").css("display","block");
        }
        for(let i=0;i<btns.length;i++){
            if(i==index){
                btns[i].setAttribute("class","layui-btn");
                continue;
            }
            btns[i].setAttribute("class","layui-btn layui-btn-primary");
        }
    }
</script>
</body>
</html>